<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button>11</button>

    <script>


        // 事件监听的方式如果需要移除必须写具名函数 !!!!!!!!!!!!!
        //     obj.addEventListener(type , fn)
        // 移除事件
        //     obj.removeEventListener(type , fn)






        var oBtn = document.getElementsByTagName('button')[0];


        // oBtn.addEventListener('click' , function() {
        //     console.log(666);
        // })

        // oBtn.addEventListener('click' , function() {
        //     console.log(777);
        // })

        // oBtn.removeEventListener('click' , ????)   不知道移除哪一个


        // oBtn.addEventListener('click', fn1);
        // oBtn.addEventListener('click', fn2);


        function fn1() {
            console.log(666);
        }

        function fn2() {
            console.log(777);
        }


        // oBtn.removeEventListener('click', fn1);
        // oBtn.removeEventListener('click', fn2);



        addEvent(oBtn , 'click' , fn1) ;
        removeEvent(oBtn , 'click' , fn1) ;


        // 主流浏览器移除事件监听
        // oBtn.removeEventListener('click' , fn1) ;

        // IE8移除事件监听
        // oBtn.detachEvent('onclick' , fn1);


        // 添加事件监听的兼容写法
        function addEvent(obj, type, f) {
            if (window.addEventListener) {
                obj.addEventListener(type, f)
            } else {
                // 兼容IE8及以下
                obj.attachEvent('on' + type, f)
            }
        }


        // 移除事件监听的兼容写法
        function removeEvent(obj, type, f) {
            if (window.removeEventListener) {
                obj.removeEventListener(type, f)
            } else {
                // 兼容IE8及以下
                obj.detachEvent('on' + type, f)
            }
        }



    </script>

</body>

</html>